/**
 * 自定义卡片组件
 */

import React from 'react';
import { Card as AntCard, CardProps as AntCardProps } from 'antd';
import styled from 'styled-components';
import { themeConfig } from '../../theme/themeConfig';

interface CardProps extends Omit<AntCardProps, 'variant'> {
  variant?: 'default' | 'elevated' | 'outlined';
}

const StyledCard = styled(AntCard)<CardProps>`
  border-radius: ${themeConfig.borderRadius.medium};
  transition: all ${themeConfig.transitions.duration} ${themeConfig.transitions.easing};
  
  ${props => {
    switch (props.variant) {
      case 'elevated':
        return `
          box-shadow: ${themeConfig.colors.shadow};
          border: none;
          
          &:hover {
            box-shadow: ${themeConfig.colors.shadowHover};
            transform: translateY(-2px);
          }
        `;
      case 'outlined':
        return `
          border: 1px solid ${themeConfig.colors.border};
          box-shadow: none;
          
          &:hover {
            border-color: ${themeConfig.colors.primary};
          }
        `;
      default:
        return `
          border: 1px solid ${themeConfig.colors.border};
          box-shadow: ${themeConfig.colors.shadow};
          
          &:hover {
            box-shadow: ${themeConfig.colors.shadowHover};
          }
        `;
    }
  }}
  
  .ant-card-head {
    border-bottom: 1px solid ${themeConfig.colors.border};
    
    .ant-card-head-title {
      font-weight: ${themeConfig.typography.fontWeight.semibold};
      color: ${themeConfig.colors.text};
    }
  }
  
  .ant-card-body {
    padding: ${themeConfig.spacing.lg};
  }
`;

export const Card: React.FC<CardProps> = ({ 
  variant = 'default',
  children,
  ...props 
}) => {
  return (
    <StyledCard
      variant={variant}
      {...props}
    >
      {children}
    </StyledCard>
  );
};
